.page-user-vip {
    height: 100vh;

    .line {
        border-bottom: 1px solid #F1F1F1;
    }

    .at-row {
        .at-col {
            padding: 10PX;
        }
    }

    .left {
        .name {
            font-size: 16PX;
            color: #1A1A1A;
        }

        .level {
            font-size: 8PX;
            color: #1A1A1A;
        }
        .did {
            font-size: 12PX;
            color: #ccc;
        }
        text {
            font-size: 28px;
        }
    }

    .right {
        text-align: right;

        .doing {
            font-size: 12PX;
            color: #17A8E6;
        }

        .did {
            font-size: 12PX;
            color: #ccc;
        }
    }
}

.page-user-explain {

    .at-article__h2,
    .at-article__h3,
    .at-article__p {
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
    }
    .at-action-sheet__header{
        color:#1A1A1A;
        font-size: 16PX;
    }
    .at-action-sheet__header::after{
        border-bottom-width:0PX; 
    }
    .pay-mode {
        min-height: 48PX;
        margin:0 18PX; 
        width: auto;
        border-bottom:1px solid #F1F1F1;
        display: flex;
        align-items: center; 
        .item-left {
            display: flex;
            align-items: center; 
            color:#1A1A1A;
            font-size: 16PX; 
            .wx {
                width:17PX;
                height:17PX;
                margin-right: 4PX;
            }
            .bank {
                width: 14PX;
                height: 11PX;
                margin-right: 4PX;
            }
            .qr {
                width: 16PX;
                height: 16PX;
                margin-right: 4PX;
            }
 
        }
        .item-right{
            width: 16PX;
            height: 16PX;
            border:1px solid #999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex:0 1 auto;
            color:#fff;
            -webkit-box-flex: 0 1 auto;
            border-radius: 50%;
        } 
        .at-icon-check{
            margin-top:-3PX;
            font-weight: bold;
        }
    } 
    .pay-mode:last-of-type{
        border-bottom: 0;
    }
    .bank-info{
        padding:0 19PX 0;
        color:#333;
        text-align: left;
        font-size: 13PX;
        line-height: 23PX;
    }
    .color-box {
        position: relative;
        width: 36PX;
        height: 36PX;
        border-radius: 6PX;
        background: linear-gradient(180deg, rgba(251, 173, 0, 1) 0%, rgba(255, 127, 44, 1) 100%);

        image {
            position: absolute;
            width: 22PX;
            height: 22PX;
            top: 50%;
            left: 7PX;
            margin-top: -11PX;
        }
    }
    .share-btn{
        width: 66PX;
        height: 32PX;
        border: 1PX solid #17A8E6;
        opacity: 1;
        border-radius: 50PX;
        font-size: 14PX;
        background-color:#fff;
        color:#17A8E6;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.page-vip-success {
    height: 100vh;

    .vip-status {
        height: 110PX;
        background: linear-gradient(270deg, rgba(39, 181, 242, 1) 0%, rgba(109, 205, 255, 1) 100%);

        .text1 {
            font-size: 18PX;
            color: #fff;
        }

        .text2 {
            font-size: 10PX;
            color: #fff;
        }
    }

    .c0 {
        padding: 0 15PX;

        .color-box {
            position: relative;
            width: 22PX;
            height: 22PX;
            border-radius: 6PX;

            image {
                position: absolute;
                width: 14PX;
                height: 14PX;
                top: 50%;
                left: 4PX;
                margin-top: -7PX;
            }
        }

        .color1{
            padding: 8PX;
            font-size: 12PX;
            color: #5B2E00;
            border-radius: 6PX;
            background:rgba(252,225,189,1);
            .color11{
                background:linear-gradient(180deg,rgba(242,187,115,1) 0%,rgba(232,157,59,1) 100%);
            }
        }

        .color2{
            padding: 8PX;
            font-size: 12PX;
            color: #5B2E00;
            border-radius: 6PX;
            background:rgba(252,189,237,1);
            .color21{
                background:linear-gradient(180deg,rgba(213,113,255,1) 0%,rgba(227,49,233,1) 100%);
            }
        }

        .color3{
            padding: 8PX;
            font-size: 12PX;
            color: #5B2E00;
            border-radius: 6PX;
            background:rgba(189,225,252,1);
            .color31{
                background:linear-gradient(180deg,rgba(81,207,255,1) 0%,rgba(68,171,249,1) 100%);
            }
        }
    }
}


.page-vip-income {

    .c0 {
        padding: 0 15PX;

        .income-title {
            image{
                width: 55PX;
                height: 55PX;
                vertical-align: text-bottom;
            }
            .t1 {
                font-size: 16PX;
                color: #1A1A1A;
            }
        }

        .list-item-box {
            padding: 10PX;
            border-radius: 6PX;
            background: #fff;
            box-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
        }

        .income-item{
            margin-top: 5PX;
            height: 33PX;
            line-height: 33PX;
            text-align: center;
            border:1px solid #FAA023;
            .at-col-4{
                background: #FAA023;
                color: #fff;
            }

            .at-col-8{
                color: #FAA023;
            }
        }

        .zj{
            border:1px solid #DF3D09 !important;
            .at-col-4{
                background: #DF3D09 !important;
                color: #fff;
            }

            .at-col-8{
                color: #DF3D09 !important;
            }
        }

        .gj{
            border:1px solid #D33BFF !important;
            .at-col-4{
                background: #D33BFF !important;
                color: #fff;
            }

            .at-col-8{
                color: #D33BFF !important;
            }
        }

        .cgj{
            border:1px solid #DB1987 !important;
            .at-col-4{
                background: #DB1987 !important;
                color: #fff;
            }

            .at-col-8{
                color: #DB1987 !important;
            }
        }

        .color-box {
            display:inline-block;
            position: relative;
            width: 20PX;
            height: 20PX;
            border-radius: 6PX;
            background:linear-gradient(180deg,rgba(251,173,0,1) 0%,rgba(255,127,44,1) 100%);

            image {
                position: absolute;
                width: 12PX;
                height: 12PX;
                top: 50%;
                left: 4PX;
                margin-top: -6PX;
            }
        }

        .user-name{
            font-size: 14PX;
            color: #1A1A1A;
        }

        .user-level1{
            font-size: 10PX;
            color: #1A1A1A;
            margin-left: 5PX;
            margin-right: 10PX;
        }

        .user-level2{
            padding: 2PX;
            border-radius: 2PX;
            font-size: 8PX;
            color: #fff;
            background: #FCE1BD;
        }

        
    }
}

.page-vip-qr{
    .c0 {
        padding: 15PX;
    }

    Text{
        font-size: 14PX;
        color: #1A1A1A;
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
        
    }
}
.rich p {
    word-break: break-all;
}
#chnages {
    .at-modal__content {
        padding: 32px 24px 0;
    }
    .at-checkbox__icon-cnt {
        margin-top: 0;
    }
    .at-checkbox__option-cnt {
        align-items: center;
    }
    .at-checkbox__title {
        font-size: 24px;
        padding-right: 0;
    }
    
    .at-checkbox__option  {
        padding-left: 0;
    }
    
    .at-checkbox__option-wrap {
        padding: 24px 0 24px 0;
    }
    .at-checkbox::after, 
    .at-checkbox::before {
        border: 0;
    } 
}


.pd {
    border-top: 20px solid #eee;
    .title {
        font-size: 28px;
        font-weight: bold;
        color: #666;
        padding: 0 20px;
        border-bottom: 1px solid #eee;
        line-height: 80px;
    }
}
.levelName {
    image {
        width: 46PX;
        height: 16PX;
    }
}
.orders-info{
    font-size: 13PX;
    color:#333;
    margin-bottom: 4PX;
    line-height: 18PX;
    .hint{
        color:#DF1616;
        padding-top:10PX;
    }
}